.navigation{
  .nav_checkbox{
    display: none;
    &:checked ~ .nav_background{
      transform: scale(80);
    }
    &:checked ~ .nav{
      opacity: 1;
      width: 100%;
    }

    &:checked + .nav_button .nav_icon{
      background-color: transparent;
    }
    &:checked + .nav_button .nav_icon::before{
      top: 0;
      transform: rotate(45deg);
    }
    &:checked + .nav_button .nav_icon::after{
      top: 0;
      transform: rotate(-45deg);
    }
  }



  .nav_button{
    text-align: center;
    background-color: $color-white;
    height: 7rem;
    width: 7rem;
    position: fixed;
    top: 6rem;
    right: 6rem;
    border-radius: 50%;
    z-index: 10000;
    cursor: pointer;

    &:hover .nav_icon::before{
      top: -1rem;
    }
    &:hover .nav_icon::after{
      top: 1rem;
    }

    .nav_icon{
      position: relative;
      margin-top: 3.2rem;
      &,&::before,&::after{
        width: 3rem;
        height: 2px;
        background-color: darkgrey;
        display: inline-block;
      }
      &::before,
      &::after{
        content: "";
        position: absolute;
        left: 0;
        transition: all .2s;
      }
      &::before{
        top: -.8rem;
      }
      &::after{
        top: .8rem;
      }
    }
  }

  .nav_background{
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    position: fixed;
    top:6.5rem;
    right:6.5rem;
    z-index: 9998;
    background-image: radial-gradient($color-primary-light,$color-primary-dark);
    //transform: scale(80);
    box-shadow: 0 1rem 3rem rgba($color-black,.1);
    transition: all .4s;
  }

  .nav{
    height:100vh;
    //width: 100%;
    position: fixed;
    top:0;
    right:0;
    z-index:9999;

    opacity: 0;
    width:0;
    transition: all .4s;

    .list{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      list-style: none;
      text-align: center;

      .item{
        margin: 1rem;
        .link{
          span{
            margin-right: 1.2rem;
          }
          &:link,&:visited{
            display: inline-block;
            font-size: 3rem;
            font-weight: 300;
            padding: 1rem 2rem;
            color: $color-white;
            text-decoration: none;
            text-transform:uppercase;
            background-image: linear-gradient(120deg,
                    transparent 0%, transparent 50%, $color-white 50%);
            background-size: 250%;
            transition: all .4s;
          }
          &:hover,&:active{
            background-position: 100%;
            color:$color-primary;
          }
        }
      }
    }
  }
}
